<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/administerhome' }" class="breadCrumb">首页
            </el-breadcrumb-item>
            <el-breadcrumb-item>活动审批</el-breadcrumb-item>
            <el-breadcrumb-item>入住审批</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="bed-management-main">
            <div class="operater-bar">
                <!--输入和选择区域-->
                <div class="input-select-field">
                    <div>
                        <el-text class="mx-1">老人姓名：</el-text>
                        <el-input placeholder="请输入姓名" v-model="pageInfo.elderName" />
                    </div>
                    <div>
                        <el-text class="mx-1">提交时间：</el-text>
                        <el-date-picker v-model="submissionTime" type="date" placeholder="选择一个时间" :value-on-clear="null"
                            value-format="YYYY-MM-DD 00:00:00" clearable />
                    </div>
                    <div>
                        <el-text class="mx-1">审批时间：</el-text>
                        <el-date-picker v-model="approvalTime" type="date" placeholder="选择一个时间" :value-on-clear="null"
                            value-format="YYYY-MM-DD 00:00:00" clearable />
                    </div>
                    <div>
                        <el-text class="mx-1">审批状态：</el-text>
                        <el-select placeholder="请选择审批状态" size="normal" v-model="pageInfo.approvalState"
                            :value-on-clear="null" clearable>
                            <el-option v-for="item in checkInStatusOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>
                <!--按钮区域-->
                <div class="btn-field">
                    <el-button type="primary" @click="getPage()">搜索</el-button>
                </div>

            </div>
            <div class="table-field">
                <el-table :data="tableData" border stripe style="width: 100%">
                    <el-table-column prop="recordId" label="ID" />
                    <el-table-column prop="elderName" label="老人姓名" />
                    <el-table-column prop="status" label="审批状态" />
                    <el-table-column prop="uploadTime" label="提交时间" />
                    <el-table-column prop="recordTime" label="审批时间" />
                    <el-table-column prop="operator" label="操作">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="getEditDetails(scope.row)">
                                审批
                            </el-button>
                            <el-button type="primary" size="small" color="red" @click="deleteRecord(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize" background
                    :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                    @current-change="handleSizeChange()" @size-change="handleCurrentChange()" />
            </div>
        </el-card>
        <!--查看详情的对话框-->
        <el-dialog v-model="editDialogVisible" title="审批" width="50%">
            <!--内容主体区域-->
            <el-form label-position="right" :model="detailsRow" label-width="90px" ref="detailsForm" status-icon>
                <el-row>
                    <el-form-item label="老人姓名">
                        <el-input v-model="detailsRow.elderName" type="text" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="detailsRow.eldIdNum" type="text" style="width: 250px;" readonly></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="备注：">
                        <el-input v-model="detailsRow.recordContents" style="width: 240px" :rows="5" resize="none"
                            type="textarea" readonly />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="审批状态">
                        <el-radio-group v-model="detailsRow.recordState">
                            <el-radio :value="0">待审批</el-radio>
                            <el-radio :value="1">未通过</el-radio>
                            <el-radio :value="2">已通过</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-form>
            <!--底部区域-->
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false" class="buttonClass" color="red">取 消</el-button>
                    <el-button type="primary" @click="editRecord()" class="buttonClass" :bg="true">
                        确 定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ArrowRight, Plus, CirclePlusFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 导入封装的接口方法
import * as record from '@/api/record.js'
import { tr } from 'element-plus/es/locales.mjs';


const pageInfo = reactive({ elderName: '', pageNum: 1, pageSize: 5, approvalState: null })
const totalCount = ref(0)
const tableData = ref([]);
const approvalTime = ref('');
const submissionTime = ref('');

const getPage = () => {
    const params = reactive({
        elderName: pageInfo.elderName,
        currentPage: pageInfo.pageNum,
        pageSize: pageInfo.pageSize,
        submissionTime: submissionTime,
        approvalState: pageInfo.approvalState,
        approvalTime: approvalTime,
        typeofrecord: "入住登记"
    })
    record.PageInfoAPI(params).then((resp) => {
        if (resp.data.code !== 2000) {
            ElMessage({
                type: 'error',
                message: resp.data.message,
            })
            return
        }
        totalCount.value = resp.data.total;
        tableData.value = resp.data.data.map(item => ({
            recordId: item.recordId,
            typeofrecord: item.typeofrecord,
            recordContents: item.recordContents,
            elderId: item.elderId,
            phone: item.nurseTelephone,
            status: item.status,
            elderName: item.elderName,
            eldIdNum: item.eldIdNum,
            uploadTime: item.createTime,
            recordTime: item.recordTime,
            recordState: item.recordState
        }));
    })
}
const handleSizeChange = () => {
    getPage();
}
const handleCurrentChange = () => {
    getPage();
}
onMounted(() => {
    getPage();
})

const checkInStatusOptions = [
    {
        value: 1,
        label: '未通过'
    },
    {
        value: 2,
        label: '已通过'
    },
    {
        value: 0,
        label: '待审批'
    }
]
const getEditDetails = (row) => {
    detailsRow.value = JSON.parse(JSON.stringify(row))
    editDialogVisible.value = true
}
const detailsRow = ref({});
const editDialogVisible = ref(false);
const editRecord = () => {
    const data = reactive({
        recordId: detailsRow.value.recordId,
        elderId: detailsRow.value.elderId,
        typeofrecord: detailsRow.value.typeofrecord,
        recordState: detailsRow.value.recordState,
    });
    record.editRecordInfoAPI(data).then((resp) => {
        if (resp.data.code !== 2000) {
            ElMessage({
                type: 'error',
                message: resp.data.message,
            })
            return
        } else {
            ElMessage({
                message: resp.data.message,
                type: 'success',
            })
            editDialogVisible.value = false;
            getPage();
        }
    })
}
//删除
const deleteRecord = (row) => {
    const data = reactive({
        recordId: row.recordId
    })
    record.deleteRecordByIdAPI(data).then((resp) => {
        if (resp.data.code !== 2000) {
            ElMessage({
                type: 'error',
                message: resp.data.message,
            })
            getnurse();
            return
        }
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        getPage();
    })

}

</script>

<style lang="less" scoped>
.el-breadcrumb {
    margin-bottom: 15px;
}

.bed-management-main {
    width: 1175px;
    height: 575px;
}

.operater-bar {
    width: 100%;
    flex-direction: row;
    display: flex;
}

.input-select-field {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 4000px;
}

.table-field {
    width: 100%;
    margin-top: 15px;
}

.el-input {
    width: 150px;
}

.el-select {
    width: 150px;
}

.btn-field {
    width: 350px;
    display: flex;
    justify-content: flex-end;

    >.el-button {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
}

.line {
    width: 1px;
    background-color: var(--el-border-color);
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>